<template>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
        <el-row class="margin-top-sm padding-left padding-right">
          <el-col :span="10">
            <div class="border-bottom flex justify-between align-start" style="height:30px">请选择用户</div>
              <div class="margin-top">
                <el-input v-model="deptName" placeholder="请输入用户名称">
                  <i
                      class="el-icon-search el-input__icon"
                      slot="suffix"
                      @click="search">
                  </i>
              </el-input>
            </div>
            <div class="margin-top-xs height500 " :class="{'IsSingleChoice':SingleChoice == 'SingleChoice'}">
                <el-tree
                v-if="deptOptions.length > 0"
                :data="deptOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                node-key="code"
                show-checkbox
                :default-expand-all="[1]"
                highlight-current
                :check-strictly="true"
                :defaultExpandAll="true"
                @check="handleNodeClick"
              >
                <span slot-scope="{ node, data }">
                   <div>
                      <!-- <el-tooltip class="item" effect="dark" content="兼职人员" placement="top-start">
                         <span class="isPluralistic" v-if="data.isPluralistic && data.username">兼</span>
                      </el-tooltip> -->
                      <span style="padding-left:4px;font-size:12px;">{{ data.nameNum }}</span>
                   </div>
                </span>
                </el-tree>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="border-bottom flex justify-between align-start margin-left" style="height:30px">
              <div>已选用户</div>
              <div><el-button v-preventReClick type="text" @click="clear">清空</el-button></div>
            </div>
            <div class="border-left height500 margin-left">
              <div v-for="item in selectOptions" :key="item.id" class="margin-top-sm margin-left-sm">
                <el-tag closable @close="handledelete(item.id)">
                  <span>{{item.nameNum || item.name}}</span>
                  <!-- <span class="margin-left" v-if="SingleChoice == 'multiple'">{{item.mobile}}</span> -->
                  <!-- <span class="margin-left" v-else>{{item.orgName}}</span> -->
                </el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick @click="submit" type="primary">确 定</el-button>
          <el-button v-preventReClick @click="open = false">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { userList } from "@/api/system/userGroup";
export default {
  props:{
    title:{
      type:String,
      default:'添加用户'
    }
  },
  data() {
    return {
      open: false,
      queryParams:{},
      defaultProps: {
        children: "children",
        label: "nameNum"
      },
      // 部门名称
      deptName: undefined,
      // 部门树选项
      deptOptions: [],
      selectOptions: [],
      //个人还是企业
      command:'',
      //是否多选,默认多少
      SingleChoice:'multiple',
      //移动至单选部门原部门的ID
      oldDeptId:undefined,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {

    init(command,list = [],oldDeptId){
      this.open = true
      this.command = command
      if(oldDeptId){//移动至页面跳转
       this.oldDeptId = oldDeptId
       this.getTreeselect(list,oldDeptId);
      }else{
        this.getTreeselect(list);
      }
    },
    clear(){
      this.selectOptions = []
      this.$refs.tree.setCheckedNodes([],false)
    },
    //传递是否单选
    setselect(SingleChoice){
      this.SingleChoice = SingleChoice || 'multiple'
    },
     /** 查询部门下拉树结构 + 岗位下拉 */
    getTreeselect(newlist,oldDeptId) {
      userList({}).then(response => {
        // 处理 deptOptions 参数
        this.deptOptions = [];
        let list = JSON.parse(JSON.stringify(response.data))
        list.forEach(res =>{
          res.nameNum = `${res.userName}`
          res.code = res.userId
          if(res.userId == oldDeptId){
            res.disabled = true
          }
          // 如果是单选的话需要特殊处理
          if(this.SingleChoice == 'SingleChoice'){
            res.disabled = true
          }
        })
        this.deptOptions.push(...list);
        

        // 赋值是否勾选,回显
    
        var that = this
        if(newlist.length > 0){
            for (let index = 0; index < newlist.length; index++) {
              let element = newlist[index];
              element.nameNum = element.userName
              element.code = element.userId
              if(this.SingleChoice == 'SingleChoice'){
                element.nameNum = element.userName
              }
            }
            setTimeout(() => {
              this.$refs.tree.setCheckedNodes(newlist,true)
            });
          }
            this.selectOptions = newlist
           
      });
    },
        // 格式化部门的下拉框
    normalizer(node) {
      return {
        id: node.userId,
        label: node.userName,
        children: node.children
      };
    },
       // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.userName.indexOf(value) !== -1;
    },
      // tree
    handleNodeClick(data, list) {
        this.selectOptions = this.$refs.tree.getCheckedNodes() || []
    },
    //删除
    handledelete(id){
      this.selectOptions = this.selectOptions.filter(res =>res.id != id)
      this.$refs.tree.setCheckedNodes(this.selectOptions,true)
    },
    // search
    search(){
      
    },
    submit(){
      if(this.selectOptions.length == 0){
        return this.$message.error('暂未选择人员')
      }
      this.open = false
      let newselectOptions = JSON.parse(JSON.stringify(this.selectOptions));
      this.$emit('emitplayer',newselectOptions)
    },
    //去重
    unique(arr){
      return Array.from(new Set(arr))
    }
  },
  created() {
    // this.getTreeselect();
  }
};
</script>
<style scoped lang="scss">
.isPluralistic{
    color: #fff;
    background-color: #1257FF;
    border-color: #1257FF;
    padding:1px 2px;
    font-size: 14px;
    border-radius: 5px;
    box-sizing: border-box;
}
.height500{
  max-height: 70vh;
  overflow: auto;
}
.border{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #F4F6FA;
}
::v-deep .border-bottom{
    border-bottom: 1px solid #F4F6FA;
    .el-button--small{
      padding: 0px 10px;
    }

}
.border-left{
    border-left: 1px solid #F4F6FA;
}
.border-right{
    border-right: 1px solid #F4F6FA;
}
.add{
  margin: -2px;
  margin-left: 5px;
}
::v-deep .el-button--mini{
  padding: 3px 10px;
  span{
    margin-left: 1px;
  }
}
::v-deep .el-dialog__body{
  padding: 0 0px 20px 0px;
}
::v-deep .IsSingleChoice {
  .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // 不可全选样式
    .is-disabled {
      display: none;
    }
}
}
</style>